<style lang="scss" scoped>
$blue:#4C8DEB;
.gray{
    color: #999;
}
.bg{
    width:100%;
}
.box{
    padding:10px 20px ;
    label{
        width:100%;
        border-bottom: 1px solid#999;
        input[type='text'],input[type='password']{
            width:60%;
            outline: none;
            border:0;
            line-height: 30px;
            font-size: 14px;
            &::-webkit-input-placeholder { 
                color: #999;
                font-size: 14px;
            }
        }
    }
    
}
.type{
    height:45px;
    text-align: center;
    line-height: 45px;
    background: #F9F9F9;
    display: flex;
    justify-content: space-between;
    p{
        color: #666;
        height: 100%;
        width:50%;
        &.active{
            color: #4C8DEB;
            background: #fff;
        }
    }
}

h5{
    color: #333;
    font-size: 14px;
}
.getmsg{
    width:100px;
    position:absolute;
    right: 0;
    margin: 0;
    bottom: 8px;
    left: inherit;
    background: #fff;
    color: #4C8DEB;
    border:1px solid #4C8DEB;
}
button{
    margin: 20px auto 0;
    width:90%;
    line-height: 35px;
    color: #fff;
    background: #4C8DEB;
    border:0;
    border-radius: 3px;
    display: block;
    outline: none;
}
.treaty{
    text-align: center;
    margin:20px  auto;
    display: block;
    width:180px;
}
.dialog {
    width:100%;
    height: 100vh;
    background: rgba(0,0,0,.5);
    position:fixed;
    top: 0;left: 0;
    .content{
        border-radius: 6px;
        background: #fff;
        width:90%;
        font-size: 22px;
        height: 200px;
        text-align: center;
        position:absolute;
        left: 0;right: 0;
        top: 0;bottom: 0;
        margin: auto;
        line-height: 70px;
        img{
            margin-top: 30px;
            width:80px;
        }
    }
}
</style>


<template>
    <div class="register">
        <img class="bg" src="@/assets/m_register.png" alt="">
        <div class="type">
            <p :class="{active:fm.type==='个人'}" @click="fm.type='个人'">个人</p>
            <p :class="{active:fm.type==='企业'}" @click="fm.type='企业'">企业</p>
        </div>
        <div class="box">
            <h5>邀请码<span class="gray">（选填）</span></h5>
            <label><input v-model="fm.invite_code" type="text" placeholder="请输入邀请码"></label>
        </div>
        <div class="box">
            <h5>{{fm.type==='个人'?'姓名':'企业名称'}}</h5>
            <label><input v-model="fm.name" type="text" :placeholder="'请输入'+(fm.type==='个人'?'姓名':'企业名称')"></label>
        </div>
        <div class="box">
            <h5>手机</h5>
            <label><input v-model="fm.tel" type="text" placeholder="请输入手机号码"></label>
        </div>
        <div class="box">
            <h5>密码</h5>
            <label><input v-model="fm.pwd" type="password" placeholder="请输入密码"></label>
        </div>
        <div class="box">
            <h5>验证码</h5>
            <label style="position: relative;">
                <input maxlength="4" v-model="fm.verify" type="text" placeholder="请输入验证码">
                <button class="getmsg" @click="getMSG">{{msg_text}}</button>
            </label>
        </div>
        <button @click="submit">同意协议并注册</button>
        <label class="treaty">
            <input type="checkbox" :value="true" v-model="treaty"> 我已阅读并结束
            <router-link to="rule">用户协议</router-link>
        </label>
        <div class="dialog" v-show="dialog_show">
            <div class="content">
                <img src="@/assets/success.svg">
                <p>注册成功</p>
            </div>
        </div>
    </div>
</template>
<script>
import {sendSMS,official_reg} from "@/assets/api"
export default {
    data(){
        return{
            dialog_show:false,
            treaty:false,
            msg_text:'获取验证码',
            fm:{
                reg_type:1,
                verify:'',
                name:'',
                pwd:'',
                type:'个人',
                source:'外观99元H5活动页',
                invite_code:''
            }
        }
    },
    methods:{
        getMSG(){
            if(!isNaN(this.msg_text)|| this.fm.tel.toString().length!=11)  return 
            this.msg_text=60
            sendSMS({tel:this.fm.tel,sence:'reg'})
            .then(res=>{
                if(res){
                    let msg_status=setInterval(()=>{
                    if(this.msg_text<1){
                        this.msg_text='获取验证码'
                        clearInterval(msg_status)
                    }else 
                        this.msg_text--
                    },1000)
                }else{
                    this.msg_text='获取验证码'
                }
            })
        },
        submit(){
            if(this.treaty&&this.fm.verify.length===4 && this.fm.tel && this.fm.pwd && this.fm.name){
                official_reg(this.fm).then(res=>{
                    if(res){
                        localStorage.setItem('unique_code',res.data.unique_code)
                        localStorage.setItem('name',this.fm.name)
                        localStorage.setItem('client_id',res.data.id)
                        this.dialog_show=true 
                        setTimeout(()=>{
                            this.dialog_show=false
                            this.$router.push('invite')
                        },1500)
                    }
                })
                
            }
        }
    },
    created(){
        this.fm.invite_code=this.$route.query.invite_code || localStorage.getItem('invite_code')
    }
}
</script>

